<template>
  <div class="visitor-alreadyVisited">
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">隐患类型:</div>
        <div class="input-item">
          <a-select ref="select" v-model="queryParam.riskType" placeholder="请选择">
            <a-select-option v-for="(item, index) in risk_type" :key="index" :value="item.value">
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">隐患来源:</div>
        <div class="input-item">
          <a-select ref="select" v-model="queryParam.riskSource" placeholder="请选择">
            <a-select-option value="1">群众举报</a-select-option>
            <a-select-option value="2">民警发现</a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">人员姓名:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.userName" placeholder="请填写" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">联系电话:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.userMobile" placeholder="请填写" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">所属辖区:</div>
        <div class="input-item">
          <!-- <a-input :maxLength="30" clearable v-model="queryParam.policeJurisdictionName" placeholder="请填写" /> -->

          <a-select
            ref="select"
            show-search
            placeholder="请选择辖区"
            v-model="queryParam.policeJurisdictionId"
            :filter-option="filterOption"
          >
            <a-select-option :value="item.id" v-for="(item, index) in police_list" :key="index">{{
              item.jurisdictionName
            }}</a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">发现时间:</div>
        <div class="time-item">
          <start-end-time
            :times="times"
            :showTime="{ format: 'HH:mm:ss' }"
            format="YYYY-MM-DD HH:mm:ss"
            @timeChange="timeChange"
            :resetTime="resetTime"
          ></start-end-time>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">分配状态：</div>
        <div class="input-item">
          <a-select v-model="queryParam.type" allowClear placeholder="请选择">
            <a-select-option :value="0"> 未分配 </a-select-option>
            <a-select-option :value="1"> 已分配 </a-select-option>
          </a-select>
        </div>
      </div>

      <div class="btn-wrap">
        <a-button
          class="searchBtn"
          @click="searchQuery(queryParam.createTime_begin, queryParam.createTime_end)"
          type="primary"
        >
          搜索
        </a-button>
        <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
      </div>
    </div>

    <div>
      <a-table
        rowKey="id"
        class="tableList"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
      >
        <template #riskType="record">
          <span> {{ get_dict_type(risk_type, record.riskType) }}</span>
        </template>
        <template #riskSource="record">
          <span> {{ record.riskSource == 1 ? '群众举报' : '民警发现' }}</span>
        </template>
        <template v-slot:action="records">
          <span class="operation deatil-color" @click="detailHandle(records)">详情 </span>
          <span class="operation deatil-color" @click="allocation_area(records)" v-has="'threecheck:risk-allocation'"
            >{{ records.policeJurisdictionName ? '重新分配' : '分配辖区' }}
          </span>
        </template>
      </a-table>
    </div>

    <detailModal ref="detailModal" />
    <allocation ref="allocation" @refresh="searchQuery()"></allocation>
  </div>
</template>
<script>
import startEndTime from '@/components/startEndTime'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapState } from 'vuex'
import { ajaxGetDictItems } from '@/api/api'
import { getAction } from '@/api/manage'
import detailModal from './modules/detailModal'
import allocation from './modules/allocation'
export default {
  name: 'visitor-alreadyVisited',
  components: { startEndTime, detailModal, allocation },
  mixins: [JeecgListMixin],
  computed: {
    ...mapState({
      isPoliceAgencyId: (state) => state.user.isPoliceAgencyId,
    }),
  },
  watch: {
    isPoliceAgencyId: {
      handler(v) {
        this.queryParam.policeAgencyId = v.id ? v.id : ''
        this.searchQuery()
      },
    },
  },
  data() {
    return {
      url: {
        list: '/common/risk_reporting/page?handleStatus=1&claimStatus=1',
        tree: true,
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '标题',
          dataIndex: 'riskTitle',
          ellipsis: true,
          width: 300,
          align: 'center',
        },
        {
          title: '类型',
          // dataIndex: 'clueType',
          scopedSlots: { customRender: 'riskType' },
          ellipsis: true,
          align: 'center',
        },
        {
          title: '来源',
          scopedSlots: { customRender: 'riskSource' },
          ellipsis: true,
          align: 'center',
        },
        {
          title: '上报人员姓名',
          dataIndex: 'userName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '联系电话',
          dataIndex: 'userMobile',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '所属辖区',
          dataIndex: 'policeJurisdictionName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '发现时间',
          dataIndex: 'discoveryTime',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
        },
      ],
      disableMixinCreated: true,
      risk_type: [], // 线索类型
      police_list: [],
    }
  },
  mounted() {
    this.getDist()
    this.get_police_list()
  },
  methods: {
    async getDist() {
      let { result: risk_type } = await ajaxGetDictItems({ code: 'risk_type' })
      this.risk_type = risk_type
    },
    get_dict_type(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },

    async get_police_list() {
      let { policeAgencyId } = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value
      let {
        result: { records },
      } = await getAction('/police/jurisdiction/list', { policeAgencyId, pageSize: 99999 })

      this.police_list = records.map((item) => ({
        id: item.id,
        jurisdictionName: item.jurisdictionName,
      }))
    },

    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.createTime_begin = this.$moment(v).valueOf()
      } else {
        this.queryParam.createTime_end = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.createTime_begin = null
        this.queryParam.createTime_end = null
      }
    },
    allocation_area(records) {
      this.$refs.allocation.show(records)
    },
    detailHandle(records) {
      this.$refs.detailModal.show(records, 0, 1, 1)
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.indexOf(input) >= 0
    },
    beforeFetch(params) {
      if (params.order) {
        delete params.order
      }
    },
  },
}
</script>
